<template>
  <page-header-wrapper :title="false">
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <!-- <a-form layout="inline">
          <a-row :gutter="16">
            <a-col :span="8">
              <a-form-item label="分类名称">
                <a-input v-model="queryParam.name" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :span="8" :offset="16" style="text-align: right;">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" style="margin-left: 8px" @click="handleSearch">查询</a-button>
                <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form> -->
      </div>
      <s-table ref="table" size="default" :columns="columns" :data="loadData" :pageNum="pageNum" :pageSize="pageSize"
        :scroll="{x: true}" rowKey="id">
        <div slot="action" slot-scope="text, record">
          <a type="primary" :disabled="record.state === 1" @click="handleStatus(record)">激活</a>
          <a :disabled="record.state === 2" @click="handleStatus(record)" style="margin-left:10px;">冻结</a>
          <a @click="handleAudit(record)" type="primary" style="margin-left:10px;">审核</a>
        </div>
      </s-table>
    </a-card>
    <create-form ref="createModal" :visible="visible" :loading="confirmLoading" :model="mdl" @cancel="handleCancel"
      @ok="handleOk" />
  </page-header-wrapper>
</template>

<script>
  import { STable } from '@/components'
  import { list, frozen, active, audit } from '@/api/issue'
  import CreateForm from './modules/form'
  const status = [{ value: 0, text: '审核中' }, { value: 1, text: '已通过' }, { value: 2, text: '已驳回' }, {
    value: -1,
    text: '已撤销'
  }]
  export default {
    name: 'TableList',
    components: {
      STable,
      CreateForm
    },
    // status 1-激活 2-冻结 3-删除
    data() {
      return {
        queryParam: {},
        pageNum: 1,
        pageSize: 20,
        visible: false,
        mdl: null,
        confirmLoading: false,
        columns: [{
            title: '创建人',
            dataIndex: 'creatorInfo',
            customRender: (val) => {
              return val && val.realName
            }
          },
          {
            title: '创建时间',
            dataIndex: 'createTime'
          },
          {
            title: '证明图片',
            width: 120,
            dataIndex: 'pic',
            customRender: (val) => {
              return < img style = "width: 45px; height: 45px"
              src = { val }
              />
            }
          },
          {
            title: '审核人',
            width: 120,
            dataIndex: 'auditor'
          },
          {
            title: '审核状态',
            width: 120,
            dataIndex: 'auditState',
            customRender: (val) => {
              const item = status.find(i => i.value === val)
              return item && item.text
            }
          },
          {
            title: '审核备注',
            width: 180,
            dataIndex: 'auditNote'
          },
          {
            title: '投诉对象',
            dataIndex: 'toUserName'
          },
          {
            title: '投诉对象手机',
            dataIndex: 'toUserMobile'
          },
          // {
          //   title: '投诉对象姓名',
          //   dataIndex: 'toUserName'
          // },
          {
            title: '操作',
            width: 160,
            fixed: 'right',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ]
      }
    },
    created() {},
    methods: {
      handleSearch(e) {
        this.$refs.table.refresh()
      },
      handleAudit(record) {
        this.visible = true
        this.mdl = { ...record }
      },
      handleCancel() {
        this.visible = false
        const form = this.$refs.createModal.form
        form.resetFields() // 清理表单数据（可不做）
      },
      handleReset() {
        this.queryParam = {}
        this.$refs.table.refresh()
      },
      loadData(params) {
        return list(Object.assign(params, this.queryParam)).then(res => {
          return res.data
        })
      },
      handleStatus(row) {
        const { state, id } = row
        this.$confirm({
          title: `您确定要${state === 1 ? '冻结' : '激活'}该知识库分类吗？`,
          onOk: () => {
            if (row.state === 1) {
              frozen([id]).then(() => {
                this.$message.success('冻结成功')
                this.$refs.table.refresh()
              })
            } else {
              active([id]).then(() => {
                this.$message.success('激活成功')
                this.$refs.table.refresh()
              })
            }
          }
        })
      },
      handleOk() {
        const form = this.$refs.createModal.form
        this.confirmLoading = true
        form.validateFields((errors, values) => {
          if (!errors) {
            audit(values).then(res => {
              this.visible = false
              this.confirmLoading = false
              // 重置表单数据
              form.resetFields()
              // 刷新表格
              this.$refs.table.refresh()

              this.$message.info('操作成功')
            })
          } else {
            this.confirmLoading = false
          }
        })
      }
    }
  }
</script>